import login_bg from '@/assets/login/登录框背景（加背景模糊毛玻璃效果）.png'

import LocalSwitch from '@/components/language/localSwitch.vue'
import { loginRules, useLoginAction } from '@/forms'
import { defineComponent, reactive } from 'vue'
import { useI18n } from 'vue-i18n'

export default defineComponent({
  setup() {
    const { t } = useI18n()

    const loginData = reactive({
      username: '',
      pass: ''
    })
    const loginActions = useLoginAction()

    const handleValidate = (values: any) => {
      loginActions.submit(values)
    }

    return () => (
      <>
        {/* 语言切换 */}
        {/* <LocalSwitch></LocalSwitch> */}
        {/* 主体 */}
        <div

          style={`background:url(${login_bg});width:100%;height:100%; background-repeat:no-repeat;background-size: cover;border-radius: 8%;  padding: 9%;box-sizing: border-box;`}
          class="   !z-10  ;"
        
        >
          {/* <div class="absolute rounded-full top-7.5 h-2 w-10 bg-mainColor left-76.5" /> */}
          {/* <div class="absolute w-20 h-2 rounded-full bottom-11.25 bg-mainColor left-14" /> */}
          <div class=" bg-transparent  ">
            <p class=" text-lg font-bold text-center text-gray-100 !text-[50px] !mb-10">{t('auth.login_title')}</p>

            <a-form rules={loginRules} onFinish={handleValidate} model={loginData}>
              <a-form-item name="username">
                <div class="flex items-center border bg-transparent">
                  <a-input
                  style="border-radius:40px;background-color: transparent;outline: none;"
                    class=" h-16 text-gray-700 focus:outline-none focus:bg-white "
                    type="text"
                    id="text"
                    placeholder="请输入用户名"
                    v-model={[loginData.username, 'value']}
                    autocomplete="username"
                    v-slots={{
                      prefix: () => <i class="i-material-symbols:person w-6 h-6 ml-3 mr-2 text-white"></i>
                    }}
                  />  
                </div>
              </a-form-item>

              <a-form-item name="pass">
                <div class="flex items-center border mt-4 mb-4">
                  <a-input
                  style="border-radius:40px;background-color: transparent;outline: none;"
                    class="h-16 text-gray-700 focus:outline-none focus:bg-white "
                    type="password"
                    id="password"
                    placeholder="请输入密码"
                    v-model={[loginData.pass, 'value']}
                    autocomplete="current-password"
                    v-slots={{
                      prefix: () => <i class="i-ri:lock-password-fill w-6 h-6 ml-3 mr-2  text-white"></i>
                    }}
                  ></a-input>
                </div>
              </a-form-item>
              <a-button
              style="border-radius:40px;font-size:30px; background: linear-gradient(to right, #4091e1, #001d6f);"
                type="primary"
                class="w-full font-light bg-mainColor h-16 text-3.5 text-white "
                html-type="submit"
              >
                {t('button.login')}
              </a-button>
            </a-form>
          </div>
        </div>

      </>
    )
    
  }
  
})
